<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import type { Ref } from "vue";
import type { IBanner } from "@/mytype";
import { getBannerApi, removeBannerByIdApi,editBannerApi } from "@/api/banner";
import AddBanner from "./AddBanner.vue";
import { ElMessageBox } from "element-plus";
import type { MessageBoxData } from "element-plus"

// 轮播图的数据

// 全部数据
let banners: Ref<Array<IBanner>> = ref<Array<IBanner>>([]);

// 获取轮播图的数据
function getBanner() {
  getBannerApi().then((data: any) => {
    if (data.code === "200") {
      banners.value = data.data;
    }
  })
}

onMounted(() => {
  getBanner();
})


// 分页相关：
// 1)、每页五条数据。
let pageSize = ref(5);
// 2)、当前页码：
let currentPage = ref(1);

// 当前页的数据：使用计算属性，当页码发生变化，会重新获取当前页的数据
let list = computed(() => banners.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value))


let msg = ref("hello");

// 控制添加窗口
let isShowAdd = ref(false);

function showAdd() {
  isShowAdd.value = true;
}

function hideAdd() {
  isShowAdd.value = false;
}

// 
function removeById(id: string) {

  ElMessageBox({
    title: "提示",
    message: "亲，您真的要删除吗？",
    showCancelButton: true
  })
    .then((data: MessageBoxData) => {
      if (data == "confirm") {
        // 用户点击了确认按钮
        removeBannerByIdApi(id)
          .then((res: any) => {
            if (res.code === "200") {
              ElMessageBox({
                title: "提示",
                message: "删除成功！"
              })
              //后端删除成功后，还需要把前端页面进行更新，两种做法:
              // 第一种：再次发送请求，获取最新数据
              // getBanner();

              // 第二种：删除前端的数组（后端删除后端，前端删除前端）
              banners.value = banners.value.filter(item => item.bannerid != id);

            }
          })
      }
    })
    .catch(err => {
      console.log("err", err);
    })



}


// 修改访问状态（该图片是否被轮播）
function editFlag(bannerid: string, newval: boolean) {
  console.log("editFlag.bannerid", bannerid);
  console.log("editFlag.newval", newval);

  editBannerApi({bannerid,flag:newval})
  .then((res:any)=>{
    if(res.code==="200"){
      ElMessageBox({
        title:"提示",
        message:"修改成功"
      })
    }
  })

}

</script>
<template>
  <div class="about">
    <h1>轮播图页面:{{msg}}</h1>
    <el-button @click="showAdd">添加轮播图数据</el-button>
    <Teleport to="body">
      <AddBanner v-if="isShowAdd" class="addBanner-box" @hide="hideAdd" @ok="getBanner"></AddBanner>
    </Teleport>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="alt" label="图片提示" width="180" />
      <el-table-column prop="bannerid" label="图片编号" width="180" />
      <el-table-column label="是否应用">
        <template #default="scope">
          <el-switch v-model="scope.row.flag" @change="(newval:boolean)=>editFlag(scope.row.bannerid,newval)" />
        </template>
      </el-table-column>

      <el-table-column label="图片地址">
        <template #default="scope">
          <img :src="scope.row.img" style="width: 100px;height: 60px;" />
        </template>
      </el-table-column>
      <el-table-column prop="link" label="跳转地址" />
      <el-table-column>
        <template #default="scope">
          <el-button type="primary" @click="removeById(scope.row.bannerid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:page-size="pageSize" v-model:current-page="currentPage" background layout="prev, pager, next"
      :total="banners.length" />
  </div>
</template>

<style scoped>
.addBanner-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
</style>
